<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Icon - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Icon</h1>

            <div uk-grid>
                <div class="uk-width-expand@m">

                    <h2>List</h2>

                    <div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
                        <div>

                            <ul class="uk-list">
                                <li>
                                    <span class="uk-icon uk-icon-image uk-margin-small-right" style="background-image: url('images/avatar.jpg');"></span>
                                    Image
                                </li>

                                <!-- App -->
                                <li><span class="uk-margin-small-right" uk-icon="icon: home"></span> home</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: sign-in"></span> sign-in</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: sign-out"></span> sign-out</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: user"></span> user</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: users"></span> users</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: lock"></span> lock</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: unlock"></span> unlock</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: settings"></span> settings</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: cog"></span> cog</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: nut"></span> nut</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: comment"></span> comment</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: commenting"></span> commenting</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: comments"></span> comments</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: hashtag"></span> hashtag</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: tag"></span> tag</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: cart"></span> cart</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: bag"></span> bag</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: credit-card"></span> credit-card</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: mail"></span> mail</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: receiver"></span> receiver</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: print"></span> print</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: search"></span> search</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: location"></span> location</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: bookmark"></span> bookmark</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: code"></span> code</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: paint-bucket"></span> paint-bucket</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: camera"></span> camera</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: video-camera"></span> video-camera</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: bell"></span> bell</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: microphone"></span> microphone</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: bolt"></span> bolt</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: star"></span> star</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: heart"></span> heart</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: happy"></span> happy</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: lifesaver"></span> lifesaver</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: rss"></span> rss</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: social"></span> social</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: git-branch"></span> git-branch</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: git-fork"></span> git-fork</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: world"></span> world</li>

                            </ul>

                        </div>
                        <div>

                            <ul class="uk-list">

                                <!-- App -->
                                <li><span class="uk-margin-small-right" uk-icon="icon: calendar"></span> calendar</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: clock"></span> clock</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: history"></span> history</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: future"></span> future</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: crosshairs"></span> crosshairs</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: pencil"></span> pencil</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: trash"></span> trash</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: move"></span> move</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: link"></span> link</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: eye"></span> eye</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: eye-slash"></span> eye-slash</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: question"></span> question</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: info"></span> info</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: warning"></span> warning</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: image"></span> image</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> thumbnails</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: table"></span> table</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: list"></span> list</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: menu"></span> menu</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: grid"></span> grid</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: more"></span> more</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: more-vertical"></span> more-vertical</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: plus"></span> plus</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: plus-circle"></span> plus-circle</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: minus"></span> minus</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: minus-circle"></span> minus-circle</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: close"></span> close</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: check"></span> check</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: ban"></span> ban</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: refresh"></span> refresh</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: play"></span> play</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: play-circle"></span> play-circle</li>

                                <!-- Devices -->
                                <li><span class="uk-margin-small-right" uk-icon="icon: tv"></span> tv</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: desktop"></span> desktop</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: laptop"></span> laptop</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: tablet"></span> tablet</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: phone"></span> phone</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: tablet-landscape"></span> tablet-landscape</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: phone-landscape"></span> phone-landscape</li>

                            </ul>

                        </div>
                        <div>

                            <ul class="uk-list">

                                <!-- Storage -->
                                <li><span class="uk-margin-small-right" uk-icon="icon: file"></span> file</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: file-text"></span> file-text</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: file-pdf"></span> file-pdf</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: copy"></span> copy</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: file-edit"></span> file-edit</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: folder"></span> folder</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: album"></span> album</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: push"></span> push</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: pull"></span> pull</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: server"></span> server</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: database"></span> database</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: cloud-upload"></span> cloud-upload</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: cloud-download"></span> cloud-download</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: download"></span> download</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: upload"></span> upload</li>

                                <!-- Direction -->
                                <li><span class="uk-margin-small-right" uk-icon="icon: reply"></span> reply</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: forward"></span> forward</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: expand"></span> expand</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: shrink"></span> shrink</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-up"></span> arrow-up</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-down"></span> arrow-down</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-left"></span> arrow-left</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-right"></span> arrow-right</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-up"></span> chevron-up</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-down"></span> chevron-down</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-left"></span> chevron-left</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-right"></span> chevron-right</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-double-left"></span> chevron-double-left</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-double-right"></span> chevron-double-right</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-up"></span> triangle-up</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-down"></span> triangle-down</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-left"></span> triangle-left</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-right"></span> triangle-right</li>

                            </ul>

                        </div>
                        <div>

                            <ul class="uk-list">

                                <!-- Editor -->
                                <li><span class="uk-margin-small-right" uk-icon="icon: bold"></span> bold</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: italic"></span> italic</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: strikethrough"></span> strikethrough</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: quote-right"></span> quote-right</li>

                                <!-- Brands -->
                                <li><span class="uk-margin-small-right" uk-icon="icon: 500px"></span> 500px</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: android"></span> android</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: android-robot"></span> android-robot</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: apple"></span> apple</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: behance"></span> behance</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: discord"></span> discord</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: dribbble"></span> dribbble</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: etsy"></span> etsy</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: facebook"></span> facebook</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: flickr"></span> flickr</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: foursquare"></span> foursquare</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: github"></span> github</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: github-alt"></span> github-alt</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: gitter"></span> gitter</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: google"></span> google</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: instagram"></span> instagram</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: joomla"></span> joomla</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: linkedin"></span> linkedin</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: microsoft"></span> microsoft</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: pagekit"></span> pagekit</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: pinterest"></span> pinterest</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: reddit"></span> reddit</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: soundcloud"></span> soundcloud</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: tiktok"></span> tiktok</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: tripadvisor"></span> tripadvisor</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: tumblr"></span> tumblr</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: twitch"></span> twitch</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: twitter"></span> twitter</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: uikit"></span> uikit</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: vimeo"></span> vimeo</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: whatsapp"></span> whatsapp</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: wordpress"></span> wordpress</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: xing"></span> xing</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: yelp"></span> yelp</li>
                                <li><span class="uk-margin-small-right" uk-icon="icon: youtube"></span> youtube</li>
                            </ul>

                        </div>
                    </div>

                    <h2>Link</h2>

                    <ul class="uk-grid-small uk-flex-middle" uk-grid>

                        <!-- App -->
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: home"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: sign-out"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: sign-in"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: user"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: users"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: lock"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: unlock"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: settings"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cog"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: nut"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: comment"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: commenting"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: comments"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: hashtag"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tag"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cart"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bag"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: credit-card"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: mail"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: receiver"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: print"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: search"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: location"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bookmark"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: code"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: paint-bucket"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: camera"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: video-camera"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bell"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: microphone"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bolt"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: star"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: heart"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: happy"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: lifesaver"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: rss"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: social"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: git-branch"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: git-fork"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: world"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: calendar"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: clock"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: history"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: future"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: crosshairs"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pencil"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: trash"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: move"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: link"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: eye"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: eye-slash"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: question"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: info"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: warning"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: image"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: thumbnails"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: table"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: list"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: menu"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: grid"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: more"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: more-vertical"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: plus"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: plus-circle"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: minus"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: minus-circle"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: close"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: check"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: ban"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: refresh"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: play"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: play-circle"></a></li>

                        <!-- Devices -->
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tv"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: desktop"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: laptop"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tablet"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: phone"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tablet-landscape"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: phone-landscape"></a></li>

                        <!-- Storage -->
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: file"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: file-text"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: file-pdf"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: copy"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: file-edit"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: folder"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: album"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: push"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pull"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: server"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: database"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cloud-upload"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cloud-download"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: download"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: upload"></a></li>

                        <!-- Direction -->
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: reply"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: forward"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: expand"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: shrink"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-left"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-right"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-up"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-down"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-left"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-right"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-double-left"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-double-right"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-up"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-down"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-left"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-right"></a></li>

                        <!-- Editor -->
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bold"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: italic"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: strikethrough"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: quote-right"></a></li>

                        <!-- Brands -->
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: 500px"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: android"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: android-robot"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: apple"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: behance"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: discord"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: dribbble"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: etsy"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: facebook"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: flickr"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: foursquare"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: github"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: github-alt"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: gitter"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: google"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: instagram"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: joomla"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: linkedin"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: microsoft"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pagekit"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pinterest"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: reddit"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: soundcloud"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tiktok"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tripadvisor"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tumblr"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: twitch"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: twitter"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: uikit"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: vimeo"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: whatsapp"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: wordpress"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: xing"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: yelp"></a></li>
                        <li><a class="uk-icon-link" href="#" uk-icon="icon: youtube"></a></li>

                    </ul>

                    <h2>Button</h2>

                    <ul class="uk-grid-small uk-flex-middle" uk-grid>

                        <!-- App -->
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: home"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: sign-out"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: sign-in"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: user"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: users"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: lock"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: unlock"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: settings"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cog"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: nut"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: comment"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: commenting"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: comments"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: hashtag"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tag"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cart"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bag"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: credit-card"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: mail"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: receiver"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: print"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: search"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: location"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bookmark"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: code"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: paint-bucket"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: camera"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: video-camera"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bell"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: microphone"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bolt"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: star"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: heart"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: happy"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: lifesaver"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: rss"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: social"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: git-branch"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: git-fork"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: world"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: calendar"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: clock"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: history"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: future"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: crosshairs"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pencil"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: trash"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: move"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: link"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: eye"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: eye-slash"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: question"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: info"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: warning"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: image"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: thumbnails"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: table"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: list"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: menu"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: grid"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: more"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: more-vertical"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: plus"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: plus-circle"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: minus"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: minus-circle"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: close"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: check"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: ban"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: refresh"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: play"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: play-circle"></a></li>

                        <!-- Devices -->
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tv"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: desktop"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: laptop"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tablet"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: phone"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tablet-landscape"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: phone-landscape"></a></li>

                        <!-- Storage -->
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: file"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: file-text"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: file-pdf"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: copy"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: file-edit"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: folder"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: album"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: push"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pull"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: server"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: database"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cloud-upload"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cloud-download"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: download"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: upload"></a></li>

                        <!-- Direction -->
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: reply"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: forward"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: expand"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: shrink"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-up"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-down"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-left"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-right"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-up"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-down"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-left"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-right"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-double-left"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-double-right"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-up"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-down"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-left"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-right"></a></li>

                        <!-- Editor -->
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bold"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: italic"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: strikethrough"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: quote-right"></a></li>

                        <!-- Brands -->
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: 500px"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: android"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: android-robot"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: apple"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: behance"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: discord"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: dribbble"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: etsy"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: facebook"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: flickr"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: foursquare"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: github"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: github-alt"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: gitter"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: google"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: instagram"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: joomla"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: linkedin"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: microsoft"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pagekit"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pinterest"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: reddit"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: soundcloud"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tiktok"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tripadvisor"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tumblr"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: twitch"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: twitter"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: uikit"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: vimeo"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: whatsapp"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: wordpress"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: xing"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: yelp"></a></li>
                        <li><a class="uk-icon-button" href="#" uk-icon="icon: youtube"></a></li>

                    </ul>

                    <h2>Ratio</h2>

                    <ul class="uk-grid-small uk-flex-middle" uk-grid>
                        <!-- App -->
                        <li><span uk-icon="ratio: 2; icon: home"></span></li>
                        <li><span uk-icon="ratio: 2; icon: sign-out"></span></li>
                        <li><span uk-icon="ratio: 2; icon: sign-in"></span></li>
                        <li><span uk-icon="ratio: 2; icon: user"></span></li>
                        <li><span uk-icon="ratio: 2; icon: users"></span></li>
                        <li><span uk-icon="ratio: 2; icon: lock"></span></li>
                        <li><span uk-icon="ratio: 2; icon: unlock"></span></li>
                        <li><span uk-icon="ratio: 2; icon: settings"></span></li>
                        <li><span uk-icon="ratio: 2; icon: cog"></span></li>
                        <li><span uk-icon="ratio: 2; icon: nut"></span></li>
                        <li><span uk-icon="ratio: 2; icon: comment"></span></li>
                        <li><span uk-icon="ratio: 2; icon: commenting"></span></li>
                        <li><span uk-icon="ratio: 2; icon: comments"></span></li>
                        <li><span uk-icon="ratio: 2; icon: hashtag"></span></li>
                        <li><span uk-icon="ratio: 2; icon: tag"></span></li>
                        <li><span uk-icon="ratio: 2; icon: cart"></span></li>
                        <li><span uk-icon="ratio: 2; icon: bag"></span></li>
                        <li><span uk-icon="ratio: 2; icon: credit-card"></span></li>
                        <li><span uk-icon="ratio: 2; icon: mail"></span></li>
                        <li><span uk-icon="ratio: 2; icon: receiver"></span></li>
                        <li><span uk-icon="ratio: 2; icon: print"></span></li>
                        <li><span uk-icon="ratio: 2; icon: search"></span></li>
                        <li><span uk-icon="ratio: 2; icon: location"></span></li>
                        <li><span uk-icon="ratio: 2; icon: bookmark"></span></li>
                        <li><span uk-icon="ratio: 2; icon: code"></span></li>
                        <li><span uk-icon="ratio: 2; icon: paint-bucket"></span></li>
                        <li><span uk-icon="ratio: 2; icon: camera"></span></li>
                        <li><span uk-icon="ratio: 2; icon: video-camera"></span></li>
                        <li><span uk-icon="ratio: 2; icon: bell"></span></li>
                        <li><span uk-icon="ratio: 2; icon: microphone"></span></li>
                        <li><span uk-icon="ratio: 2; icon: bolt"></span></li>
                        <li><span uk-icon="ratio: 2; icon: star"></span></li>
                        <li><span uk-icon="ratio: 2; icon: heart"></span></li>
                        <li><span uk-icon="ratio: 2; icon: happy"></span></li>
                        <li><span uk-icon="ratio: 2; icon: lifesaver"></span></li>
                        <li><span uk-icon="ratio: 2; icon: rss"></span></li>
                        <li><span uk-icon="ratio: 2; icon: social"></span></li>
                        <li><span uk-icon="ratio: 2; icon: git-branch"></span></li>
                        <li><span uk-icon="ratio: 2; icon: git-fork"></span></li>
                        <li><span uk-icon="ratio: 2; icon: world"></span></li>
                        <li><span uk-icon="ratio: 2; icon: calendar"></span></li>
                        <li><span uk-icon="ratio: 2; icon: clock"></span></li>
                        <li><span uk-icon="ratio: 2; icon: history"></span></li>
                        <li><span uk-icon="ratio: 2; icon: future"></span></li>
                        <li><span uk-icon="ratio: 2; icon: crosshairs"></span></li>
                        <li><span uk-icon="ratio: 2; icon: pencil"></span></li>
                        <li><span uk-icon="ratio: 2; icon: trash"></span></li>
                        <li><span uk-icon="ratio: 2; icon: move"></span></li>
                        <li><span uk-icon="ratio: 2; icon: link"></span></li>
                        <li><span uk-icon="ratio: 2; icon: eye"></span></li>
                        <li><span uk-icon="ratio: 2; icon: eye-slash"></span></li>
                        <li><span uk-icon="ratio: 2; icon: question"></span></li>
                        <li><span uk-icon="ratio: 2; icon: info"></span></li>
                        <li><span uk-icon="ratio: 2; icon: warning"></span></li>
                        <li><span uk-icon="ratio: 2; icon: image"></span></li>
                        <li><span uk-icon="ratio: 2; icon: thumbnails"></span></li>
                        <li><span uk-icon="ratio: 2; icon: table"></span></li>
                        <li><span uk-icon="ratio: 2; icon: list"></span></li>
                        <li><span uk-icon="ratio: 2; icon: menu"></span></li>
                        <li><span uk-icon="ratio: 2; icon: grid"></span></li>
                        <li><span uk-icon="ratio: 2; icon: more"></span></li>
                        <li><span uk-icon="ratio: 2; icon: more-vertical"></span></li>
                        <li><span uk-icon="ratio: 2; icon: plus"></span></li>
                        <li><span uk-icon="ratio: 2; icon: plus-circle"></span></li>
                        <li><span uk-icon="ratio: 2; icon: minus"></span></li>
                        <li><span uk-icon="ratio: 2; icon: minus-circle"></span></li>
                        <li><span uk-icon="ratio: 2; icon: close"></span></li>
                        <li><span uk-icon="ratio: 2; icon: check"></span></li>
                        <li><span uk-icon="ratio: 2; icon: ban"></span></li>
                        <li><span uk-icon="ratio: 2; icon: refresh"></span></li>
                        <li><span uk-icon="ratio: 2; icon: play"></span></li>
                        <li><span uk-icon="ratio: 2; icon: play-circle"></span></li>

                        <!-- Devices -->
                        <li><span uk-icon="ratio: 2; icon: tv"></span></li>
                        <li><span uk-icon="ratio: 2; icon: desktop"></span></li>
                        <li><span uk-icon="ratio: 2; icon: laptop"></span></li>
                        <li><span uk-icon="ratio: 2; icon: tablet"></span></li>
                        <li><span uk-icon="ratio: 2; icon: phone"></span></li>
                        <li><span uk-icon="ratio: 2; icon: tablet-landscape"></span></li>
                        <li><span uk-icon="ratio: 2; icon: phone-landscape"></span></li>

                        <!-- Storage -->
                        <li><span uk-icon="ratio: 2; icon: file"></span></li>
                        <li><span uk-icon="ratio: 2; icon: file-text"></span></li>
                        <li><span uk-icon="ratio: 2; icon: file-pdf"></span></li>
                        <li><span uk-icon="ratio: 2; icon: copy"></span></li>
                        <li><span uk-icon="ratio: 2; icon: file-edit"></span></li>
                        <li><span uk-icon="ratio: 2; icon: folder"></span></li>
                        <li><span uk-icon="ratio: 2; icon: album"></span></li>
                        <li><span uk-icon="ratio: 2; icon: push"></span></li>
                        <li><span uk-icon="ratio: 2; icon: pull"></span></li>
                        <li><span uk-icon="ratio: 2; icon: server"></span></li>
                        <li><span uk-icon="ratio: 2; icon: database"></span></li>
                        <li><span uk-icon="ratio: 2; icon: cloud-upload"></span></li>
                        <li><span uk-icon="ratio: 2; icon: cloud-download"></span></li>
                        <li><span uk-icon="ratio: 2; icon: download"></span></li>
                        <li><span uk-icon="ratio: 2; icon: upload"></span></li>

                        <!-- Direction -->
                        <li><span uk-icon="ratio: 2; icon: reply"></span></li>
                        <li><span uk-icon="ratio: 2; icon: forward"></span></li>
                        <li><span uk-icon="ratio: 2; icon: expand"></span></li>
                        <li><span uk-icon="ratio: 2; icon: shrink"></span></li>
                        <li><span uk-icon="ratio: 2; icon: arrow-up"></span></li>
                        <li><span uk-icon="ratio: 2; icon: arrow-down"></span></li>
                        <li><span uk-icon="ratio: 2; icon: arrow-left"></span></li>
                        <li><span uk-icon="ratio: 2; icon: arrow-right"></span></li>
                        <li><span uk-icon="ratio: 2; icon: chevron-up"></span></li>
                        <li><span uk-icon="ratio: 2; icon: chevron-down"></span></li>
                        <li><span uk-icon="ratio: 2; icon: chevron-left"></span></li>
                        <li><span uk-icon="ratio: 2; icon: chevron-right"></span></li>
                        <li><span uk-icon="ratio: 2; icon: chevron-double-left"></span></li>
                        <li><span uk-icon="ratio: 2; icon: chevron-double-right"></span></li>
                        <li><span uk-icon="ratio: 2; icon: triangle-up"></span></li>
                        <li><span uk-icon="ratio: 2; icon: triangle-down"></span></li>
                        <li><span uk-icon="ratio: 2; icon: triangle-left"></span></li>
                        <li><span uk-icon="ratio: 2; icon: triangle-right"></span></li>

                        <!-- Editor -->
                        <li><span uk-icon="ratio: 2; icon: bold"></span></li>
                        <li><span uk-icon="ratio: 2; icon: italic"></span></li>
                        <li><span uk-icon="ratio: 2; icon: strikethrough"></span></li>
                        <li><span uk-icon="ratio: 2; icon: quote-right"></span></li>

                        <!-- Brands -->
                        <li><span uk-icon="ratio: 2; icon: 500px"></span></li>
                        <li><span uk-icon="ratio: 2; icon: android"></span></li>
                        <li><span uk-icon="ratio: 2; icon: android-robot"></span></li>
                        <li><span uk-icon="ratio: 2; icon: apple"></span></li>
                        <li><span uk-icon="ratio: 2; icon: behance"></span></li>
                        <li><span uk-icon="ratio: 2; icon: discord"></span></li>
                        <li><span uk-icon="ratio: 2; icon: dribbble"></span></li>
                        <li><span uk-icon="ratio: 2; icon: etsy"></span></li>
                        <li><span uk-icon="ratio: 2; icon: facebook"></span></li>
                        <li><span uk-icon="ratio: 2; icon: flickr"></span></li>
                        <li><span uk-icon="ratio: 2; icon: foursquare"></span></li>
                        <li><span uk-icon="ratio: 2; icon: github"></span></li>
                        <li><span uk-icon="ratio: 2; icon: github-alt"></span></li>
                        <li><span uk-icon="ratio: 2; icon: gitter"></span></li>
                        <li><span uk-icon="ratio: 2; icon: google"></span></li>
                        <li><span uk-icon="ratio: 2; icon: instagram"></span></li>
                        <li><span uk-icon="ratio: 2; icon: joomla"></span></li>
                        <li><span uk-icon="ratio: 2; icon: linkedin"></span></li>
                        <li><span uk-icon="ratio: 2; icon: microsoft"></span></li>
                        <li><span uk-icon="ratio: 2; icon: pagekit"></span></li>
                        <li><span uk-icon="ratio: 2; icon: pinterest"></span></li>
                        <li><span uk-icon="ratio: 2; icon: reddit"></span></li>
                        <li><span uk-icon="ratio: 2; icon: soundcloud"></span></li>
                        <li><span uk-icon="ratio: 2; icon: tiktok"></span></li>
                        <li><span uk-icon="ratio: 2; icon: tripadvisor"></span></li>
                        <li><span uk-icon="ratio: 2; icon: tumblr"></span></li>
                        <li><span uk-icon="ratio: 2; icon: twitch"></span></li>
                        <li><span uk-icon="ratio: 2; icon: twitter"></span></li>
                        <li><span uk-icon="ratio: 2; icon: uikit"></span></li>
                        <li><span uk-icon="ratio: 2; icon: vimeo"></span></li>
                        <li><span uk-icon="ratio: 2; icon: whatsapp"></span></li>
                        <li><span uk-icon="ratio: 2; icon: wordpress"></span></li>
                        <li><span uk-icon="ratio: 2; icon: xing"></span></li>
                        <li><span uk-icon="ratio: 2; icon: yelp"></span></li>
                        <li><span uk-icon="ratio: 2; icon: youtube"></span></li>

                    </ul>

                </div>
                <div class="uk-width-auto@m">

                    <h2>Text-level semantics</h2>

                    <ul class="uk-list">
                        <li>The
                            <a href="#">
                                <span uk-icon="icon: trash"></span>
                                a element
                            </a>
                            example
                        </li>
                        <li>The
                            <a class="uk-link-muted" href="#">
                                <span uk-icon="icon: trash"></span>
                                link-muted
                            </a>
                            example
                        </li>
                        <li>The
                            <a class="uk-link-reset" href="#">
                                <span uk-icon="icon: trash"></span>
                                link-reset
                            </a>
                            example
                        </li>
                        <li>The
                            <code>
                                <span uk-icon="icon: trash"></span>
                                code element
                            </code>
                            example
                        </li>
                        <li>The
                            <em>
                                <span uk-icon="icon: trash"></span>
                                em element
                            </em>
                            example
                        </li>
                    </ul>

                    <h2>Buttons</h2>

                    <ul class="uk-list">
                        <li>
                            <button class="uk-button uk-button-default">
                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
                                Button
                            </button>
                        </li>
                        <li>
                            <button class="uk-button uk-button-primary">
                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
                                Button
                            </button>
                        </li>
                        <li>
                            <button class="uk-button uk-button-danger">
                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
                                Button
                            </button>
                        </li>
                        <li>
                            <button class="uk-button uk-button-secondary">
                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
                                Button
                            </button>
                        </li>
                        <li>
                            <button class="uk-button uk-button-default" disabled>
                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
                                Button
                            </button>
                        </li>
                    </ul>

                </div>
            </div>

            <h2>JavaScript Options</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Value</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>icon</code></td>
                            <td>String</td>
                            <td></td>
                            <td>The icon to display.</td>
                        </tr>
                        <tr>
                            <td><code>ratio</code></td>
                            <td>Number</td>
                            <td>1</td>
                            <td>The icon size ratio.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

    </body>
</html>
